{% block sw_cms_element_image_config %}
<div class="sw-cms-el-config-image">
    {% block sw_cms_element_image_config_media_upload %}
    <sw-cms-mapping-field
        v-model:config="element.config.media"
        :label="$tc('sw-cms.elements.image.label')"
        value-types="entity"
        entity="media"
    >
        <sw-media-upload-v2
            variant="regular"
            :upload-tag="uploadTag"
            :source="previewSource"
            :allow-multi-select="false"
            :default-folder="cmsPageState.pageEntityName"
            :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
            @media-upload-sidebar-open="onOpenMediaModal"
            @media-upload-remove-image="onImageRemove"
        />

        <template #preview="{ demoValue }">
            <div class="sw-cms-el-config-image__mapping-preview">
                <img
                    v-if="demoValue.url"
                    :src="demoValue.url"
                    alt=""
                >
                <mt-banner
                    v-else
                    class="sw-cms-el-config-image__preview-info"
                    variant="info"
                >
                    {{ $tc('sw-cms.detail.label.mappingEmptyPreview') }}
                </mt-banner>
            </div>
        </template>
    </sw-cms-mapping-field>

    <sw-upload-listener
        :upload-tag="uploadTag"
        auto-upload
        @media-upload-finish="onImageUpload"
    />
    {% endblock %}

    {% block sw_cms_element_image_config_display_mode %}
    <mt-select
        v-model="element.config.displayMode.value"
        class="sw-cms-el-config-image__display-mode"
        :label="$tc('sw-cms.elements.general.config.label.displayMode')"
        :help-text="$tc('sw-cms.elements.general.config.helpText.displayMode')"
        :options="displayModeOptions"
        @update:model-value="onChangeDisplayMode"
    />
    {% endblock %}

    <template v-if="element.config.displayMode.value === 'cover'">
        {% block sw_cms_element_image_config_min_height %}

        <mt-text-field
            v-model="element.config.minHeight.value"
            :label="$tc('sw-cms.elements.image.config.label.minHeight')"
            :placeholder="$tc('sw-cms.elements.image.config.placeholder.enterMinHeight')"
            @update:model-value="onChangeMinHeight"
        />
        {% endblock %}
    </template>

    {% block sw_cms_element_image_config_vertical_align %}
    <mt-select
        v-model="element.config.verticalAlign.value"
        :label="$tc('sw-cms.elements.general.config.label.verticalAlign')"
        :placeholder="$tc('sw-cms.elements.general.config.label.verticalAlign')"
        :disabled="['cover'].includes(element.config.displayMode.value)"
        :options="verticalAlignOptions"
    />
    {% endblock %}

    {% block sw_cms_element_image_config_horizontal_align %}
    <mt-select
        v-model="element.config.horizontalAlign.value"
        :label="$tc('sw-cms.elements.general.config.label.horizontalAlign')"
        :placeholder="$tc('sw-cms.elements.general.config.label.horizontalAlign')"
        :disabled="element.config.displayMode.value === 'cover'"
        :options="horizontalAlignOptions"
    />
    {% endblock %}

    {% block sw_cms_element_image_config_link %}
    <div class="sw-cms-el-config-image__link">
        <sw-dynamic-url-field
            v-model:value="element.config.url.value"
        />

        <mt-switch
            v-model="element.config.newTab.value"
            class="sw-cms-el-config-image__link-tab"
            :label="$tc('sw-cms.elements.image.config.label.linkNewTab')"
        />
    </div>
    {% endblock %}

    <mt-switch
        class="sw-cms-el-config-image__is-decorative"
        :model-value="element.config.isDecorative.value"
        :label="$tc('sw-cms.elements.image.config.label.isDecorative')"
        @update:model-value="onChangeIsDecorative"
    />

    {% block sw_cms_element_image_config_media_modal %}
    <sw-media-modal-v2
        v-if="mediaModalIsOpen"
        variant="full"
        :caption="$tc('sw-cms.elements.general.config.caption.mediaUpload')"
        :entity-context="cmsPageState.entityName"
        :allow-multi-select="false"
        :initial-folder-id="cmsPageState.defaultMediaFolderId"
        @media-upload-remove-image="onImageRemove"
        @media-modal-selection-change="onSelectionChanges"
        @modal-close="onCloseModal"
    />
    {% endblock %}
</div>
{% endblock %}
